<template>
	<view class="wallet">
		<!-- #ifdef APP-PLUS -->
		<top-set></top-set>
		<!-- #endif -->
		<view class="tab_top_box">
			<view class="index">
				<view class="nav_back" @tap="drawBack()">
					<image src="/static/login/back.png" mode=""></image>
				</view>
				我的钱包
				<view class="tab_zd" @tap="openBill()">账单</view>
			</view>
		</view>
		
		<view class="content">
			<view class="icon">
				<image src="/static/icon/qd-icon.png" mode=""></image>
			</view>
			<view class="wallet_text">
				<text class="text1">&yen;</text>
				<text class="text2">{{balance || '0.00'}}</text>
			</view>
			<view class="balance">
				锁定金额:&yen;&nbsp;{{lockBalance || '0.00'}}
			</view>
			<view class="cash_with" @tap="cashWith()">
				提现
			</view>
			<view class="recharge" @tap="recharge()">
				充值
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		
		data() {
			return {
				balance:'',
				lockBalance:''
			}
		},
		methods: {
			drawBack() {
				uni.navigateBack({
					delta: 1,
					"animationType": this.GLOBAL.backAnimation,
					"animationDuration": this.GLOBAL.animationTime
				});
			},
			/**
			 * 提现
			 */
			cashWith() {
				uni.navigateTo({
					url:'/pages/user/account/cash-with',
					"animationType": this.GLOBAL.backAnimation,
					"animationDuration": this.GLOBAL.animationTime
				})
			},
			/**
			 * 充值
			 */
			recharge(){
				uni.navigateTo({
					url:'/pages/user/account/recharge',
					"animationType": this.GLOBAL.backAnimation,
					"animationDuration": this.GLOBAL.animationTime
				})
			},
			/**
			 * 
			 */
			getData(){
				return new Promise((res)=>{
					this.req({
						url:'both/getBalance',
						id:this.isLogin().id,
						method:'get'
					},(data)=>{
						res(data.data);
					},(data)=>{
						uni.showToast({
							icon:'none',
							title:'服务器繁忙,请稍后重试'
						})
					})
				});
			},
			async initialization(){
				let res = await this.getData();
				console.log(res);
				this.balance = res.data.balance;
				this.lockBalance = res.data.lock_balance;
			},
			/**
			 * 打开账单
			 */
			openBill(){
				uni.navigateTo({
					url:'/pages/user/account/bill-list',
					"animationType": this.GLOBAL.backAnimation,
					"animationDuration": this.GLOBAL.animationTime
				})
			}
		},
		mounted(){
			
		},
		computed:{
			
		},
		onLoad(){
			
		},
		onShow(){
			this.initialization();
		}
	}
</script>

<style lang="scss" scoped="">
	.wallet{
		.tab_top_box {
			width: 100vw;
			height: 86upx;
			.i_fixed {
				position: fixed !important;
				z-index: 99;
				left: 0;
				top: var(--status-bar-height);
			}
		
			.index {
				position: relative;
				font-size: 36upx !important;
				background: #FFFFFF;
				width: 100%;
				height: 86upx;
				line-height: 86upx;
				text-align: center;
				
			}
			.tab_zd{
				position: absolute;
				top: 0;
				right: 0;
				font-size: 32upx;
				text-align: center;
				line-height: 86upx;
				height: 100%;
				width: 120upx;
				text-align: center;
			}
			.index:after {
				content: '';
				height: 1upx;
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				transform: scaleY(0.5);
				background: #E5E5E5;
			}
		
			.nav_back {
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 60upx;
			}
		
			.nav_back image {
				position: absolute;
				width: 32upx;
				height: 32upx;
				left: 27upx;
				top: 27upx;
			}
		}
		
		.content{
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding-top: 40upx;
			.icon{
				width: 100%;
				height: 120upx;
				image{
					width: 120upx;
					height: 120upx;
					margin: 0 auto;
					display:block;
				}
			}
			.wallet_text{
				margin-top: 20upx;
				color:rgb(53,146,249);
				text-align: center;
				.text1{
					font-size: 30upx;
					line-height: 1;
				}
				.text2{
					margin-left: 10upx;
					font-size: 60upx;
					line-height: 1;
				}
				
			}
			.balance{
				margin-top: 14upx;
				line-height: 1;
				color: rgb(153,153,153);
				font-size:24upx;
				text-align: center;
			}
			.cash_with{
				margin: 0 auto;
				margin-top: 84upx;
				width: 540upx;
				height: 90upx;
				background-color: #3595f9;
				border-radius: 8upx;
				text-align: center;
				line-height: 90upx;
				color: #FFFFFF;
			}
			.recharge{
				margin: 0 auto;
				margin-top: 40upx;
				width: 540upx;
				height: 90upx;
				border-radius: 8upx;
				text-align: center;
				line-height: 90upx;
				border: solid 1upx #3595f9;
				color: #3595f9;
			}
		}
		
	}
	
</style>
